OK，昨天的介紹比較像是試水溫(不要打我)，今天來講講幾個元件的互動效果

Button

屬性

監聽行為

• onclick

  當按鈕被按下時，執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

    Button.click(
        fn: Callable | None, 
        inputs: Component | Sequence[Component] | set[Component] | None = None, 
        outputs: Component | Sequence[Component] | None = None,
        ...
    )
  

用法

最基本也最常使用的網頁元件，透過修改不同的屬性去建立自己想要的元素

如修改 Button 名稱：

import gradio as gr

with gr.Blocks() as app:
  btn = gr.Button(value="Click me!!")

if __name__ == "__main__":
  app.launch()

使用這個按鈕的方法也很簡單，只要設定.click的方法就好了

import gradio as gr

def onclick():
  return "You clicked."

with gr.Blocks() as app:
  label = gr.HTML()
  btn = gr.Button(value="Click me!!")

  btn.click(onclick, outputs=[label])

if __name__ == "__main__":
  app.launch()

• 點擊前
  

• 點擊後
  

我們在第 10 行中定義了按鈕的行為，並且設定觸發函式，並且將函式的回傳值更新到label上

Textbox

屬性

監聽行為

• onchange

  當選擇的文字輸入框「內的文字」被更改時，執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

  Textbox.change(
      fn: Callable | None, 
      ...
  )
  

  Textbox.input(
      fn: Callable | None, 
      ...
  )
  

• onclick

  當選擇的文字輸入框被按下「Enter」時，執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

  Textbox.submit(
      fn: Callable | None, 
      ...
  )
  

• onfocus && on blur

  當選擇的文字輸入框「聚焦」或「失焦」時，執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

  Textbox.focus(
      fn: Callable | None, 
      ...
  )
  

  Textbox.blur(
      fn: Callable | None, 
      ...
  )
  

還有一個 Textbox.select 不過不實用

用法

搭配前面的 Button 元件效果如下

import gradio as gr

def onclick(text):
  return f"You Submit with \"{text}\" text."

def onchange(text):
  return f"You typed with \"{text}\"."

with gr.Blocks() as app:
  label = gr.HTML()  
  tb = gr.Textbox()
  btn = gr.Button(value="Click me!!")

  btn.click(onclick, inputs=[tb], outputs=[label])
  tb.change(onchange, inputs=[tb], outputs=[label])
  
if __name__ == "__main__":
  app.launch()

• 輸入前
  

• 輸入後
  

• 點擊按鈕後
  

與前一段程式碼相比，我們多了onchange與監聽文字框的輸入，並且實時相文字框的內容更新到label上

Chatbot

屬性

監聽行為

• onchange
  當 chatbox 內容更動時，執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

  hatbot.change(
      fn: Callable | None, 
      ...
  )
  

• onselect
  當 chatbox 內的文字泡泡被選擇時，執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

  hatbot.select(
      fn: Callable | None, 
      ...
  )
  

• like
  當 chatbox 內容更新後，底下會出現「👍」與「👎」，點選後會執行fn的函式，並且給予inuputs內的所有參數，輸出時也會將outputs內的參數更新到網頁上

  hatbot.like(
      fn: Callable | None, 
      ...
  )
  

用法

import gradio as gr

def submit(history: list):
  
  history.append(["praise me", "Wow, you are beautiful"])
  return history

def onvote():
  return "You voted the response."

with gr.Blocks() as app:
  label = gr.HTML()
  cb = gr.Chatbot()
  btn = gr.Button(value="Click me!!")

  cb.like(onvote, outputs=[label])
  btn.click(submit, inputs=[cb], outputs=[cb])

if __name__ == "__main__":
  app.launch()

• 點選按鈕前
  

• 點選按鈕後
  

• 點選投票後
  

透過以上的Button、Textbox、Chatbot的互動關係，建構出一個完整的前端頁面。

參考資料

• https://www.gradio.app/docs/gradio/textbox
• https://www.gradio.app/docs/gradio/button
• https://www.gradio.app/docs/gradio/chatbot